<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>亿点红包</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<!--CSS-->
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<style type="text/css">
	</style>
</head>

<body>
	<!------------------------header------------------------>
	<div class="header">
		<div class="header_content">
			<a href="##" id="logo" title="17辅导网">
				<img src="img/Logo@2x.png" width="260px" />
			</a>

			<div class="link">
				<a href="##">
					<img src="img/weixin.png" width="30px" class="img1" />
				</a>
				<span style="padding: 0 15px;"></span>
				<a href="##">
					<img src="img/weibo.png" width="30px" class="img2" />
				</a>
				<div class="weixin">
					<img src="img/wx.jpg" width="200px" />
				</div>
				<div class="weibo">
					<img src="img/wb.png" width="200px" />
				</div>
			</div>
		</div>
	</div>
	<div class="clearfix"></div>
	<!--清楚浮动-->

	<!------------------------header------------------------>
	<div id="fullpage">
		<!-- 创建两个页面元素 -->
		<div class="section" id="section1">
			<div class="section_1">
				<div class="section_right">
					<p class="surprised">把惊喜，装进口袋</p>
					<p class="quick">超快捷的定时惊喜软件</p>
					<img src="img/erweima-da.png" width="180px" style="float: left;" />
					<div class="write-phone">
						<p class="fillIn">填写手机号领取你的第一份惊喜</p>
						<div style="position: relative;">
							<input type="text" name="" id="" value="" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"
							 placeholder="请输入手机号" class="mobile-phone" maxlength="11" />
							<input type="button" name="" id="" value="发送" class="btn" />
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="section" id="section2">
			<div class="section_1">
				<div class="img text-left">
					<p class="redpack">红包</p>
					<p class="oneClick">一键点击，直接领取</p>
					<p class="everyDay">每天免费五次发放红包，首页点击，一键领取。无须繁琐的功能，简单方便，只为让你与红包更进一步。</p>
				</div>
				<a href="##" class="a ">
					<img src="img/hongbao.png" width="400px " />
				</a>
			</div>
		</div>
		<div class="section" id="section3">
			<div class="section_1">
				<a href="##" class="img img-right">
					<img src="img/tixian.png" width="400px" />
				</a>
				<div class="a text-left">
					<p class="redpack">提现</p>
					<p class="oneClick">快速到账，安全可靠</p>
					<p class="everyDay">支付宝提现，只为了让你的现金更安全更快速。</p>
				</div>
			</div>
		</div>
		<div class="section" id="section4">
			<div class="section_1">
				<div class="img text-left">
					<p class="redpack">兑换</p>
					<p class="oneClick">字里行间也有惊喜</p>
					<p class="everyDay">独特的兑换功能，随时提供兑换码，给你想不到的福利，这里不只有红包，还有更多惊喜等着你。</p>
				</div>
				<a href="##" class="a">
					<img src="img/duihuan.png" width="400px" />
				</a>
			</div>
		</div>
		<div class="section" id="section5">
			<div class="section_1">
				<a href="##" class="img img-right">
					<img src="img/shejiao.png" width="400px" />
				</a>
				<div class="a text-left">
					<p class="redpack">社交</p>
					<p class="oneClick">见证友谊，就是现在</p>
					<p class="everyDay" style="width: 360px;">在这里，邀请好友参与也可获得红包现金奖励，此刻，“亿”起见证友谊，约上好友，“抢抢”联手。</p>
				</div>
			</div>
		</div>
		<div class="various" id="section6">
			<div class="more-various">
				<div class="variou">
					<img src="img/duoyang.png" alt="" width="100%" />
				</div>
				<p class="more-play">多样玩法</p>
				<div class="contain">
					<ul>
						<li>
							<div class="mark">
								<img src="img/paihangbang.png" width="142px" />
							</div>
							<p class="invited">排行榜</p>
							<p class="commentary">按抢到金额排名的幸运榜和按邀请好友排名的人脉榜，每周刷新排名，冠军得奖励</p>
						</li>
						<li>
							<div class="mark">
								<img src="img/yaoqing.png" width="142px" />
							</div>
							<p class="invited">邀请好友</p>
							<p class="commentary">按抢到金额排名的幸运榜和按邀请好友排名的人脉榜，每周刷新排名，冠军得奖励</p>
						</li>
						<li>
							<div class="mark">
								<img src="img/shanghceng.png" width="142px" />
							</div>
							<p class="invited">商城系统</p>
							<p class="commentary">按抢到金额排名的幸运榜和按邀请好友排名的人脉榜，每周刷新排名，冠军得奖励</p>
						</li>
						<div class="clearfix"></div>
					</ul>
					<div class="download">
						<div class="download-left">
							<p>二维码下载</p>
							<img src="img/erweima-da.png" width="232px" />
						</div>
						<div class="download-right">
							<p style="text-align: left;">其他方式下载</p>
							<img src="img/anzhuo.png" width="260px" />
							<img src="img/ios.png" width="260px" />
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="contained">
			<ul class="contact">
				<li>
					<div class="foot">
						<p class="cooperation">商务合作
							<span class="cooper-eng">Cooperation</span>
						</p>
						<p class="phone">商务电话 :
							<span class="email">029-57628473</span>
						</p>
						<p class="phone">商务邮箱 :
							<span class="email">yunjingkeji@yunjing.com</span>
						</p>
					</div>

				</li>
				<li>
					<div class="foot">
						<p class="cooperation">联系我们
							<span class="cooper-eng">Connect</span>
						</p>
						<p class="phone">客服电话 :
							<span class="email">029-57628473</span>
						</p>
						<p class="phone">客服邮箱 :
							<span class="email">yunjingkeji@yunjing.com</span>
						</p>
					</div>

				</li>
				<li>
					<div class="foot">
						<p class="cooperation">加入我们
							<span class="cooper-eng">Join</span>
						</p>
						<p class="phone">邮箱 :
							<span class="email">yunjingkeji@yunjing.com</span>
						</p>
					</div>

				</li>
				<div class="clearfix"></div>
			</ul>

		</div>
		<div class="footed">
			<p>陕西运璟网络@2016版权所有</p>
		</div>
	</div>

</body>
<!-- 引入库文件 -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
	var w = window.screen.availWidth;
	var h = w / 1200 * 451;
	var section1 = document.getElementsByClassName("section");
	for (var i = 0; i < section1.length; i++) {
		section1[i].style.height = h + "px";
	};
</script>
<script type="text/javascript">
	$(function () {
		$(window).scroll(function () {
			if ($(window).scrollTop() > 450) {
				$("#section2 .img").animate({
					'left': '60px',
					'opacity': 1
				}, 1000);
				$("#section2 .a").animate({
					'right': '30px',
					'opacity': 1
				}, 1000);
			}
			if ($(window).scrollTop() > 900) {
				$("#section3 .img").animate({
					'left': '40px',
					'opacity': 1,
				}, 1000);
				$("#section3 .a").animate({
					'right': '40px',
					'opacity': 1,
					'margin-top': '14%'
				}, 1000);
			}
			if ($(window).scrollTop() > 1350) {
				$("#section4 .img").animate({
					'left': '60px',
					'opacity': 1
				}, 1000);
				$("#section4 .a").animate({
					'right': '30px',
					'opacity': 1
				}, 1000);
			}

			if ($(window).scrollTop() > 1800) {
				$("#section5 .img").animate({
					left: '40px',
					opacity: 1
				}, 1000);
				$("#section5 .a").animate({
					right: '30px',
					opacity: 1,
					'margin-top': '14%'
				}, 1000);
			};
		})
	});
</script>


<script type="text/javascript">
	$(function () {
		$(".img1").hover(function () {
			$(".weixin").show();
		}, function () {
			$(".weixin").hide();
		});
		$(".img2").hover(function () {
			$(".weibo").show();
		}, function () {
			$(".weibo").hide();
		});
	});
</script>

</html>